// 网络
<template>
  <div style="height: 460px">
    <echarts-load v-if="networkFlowFlag1 || reload_networkFlow1" :chartFlag="networkFlowFlag1" :reload="reload_networkFlow1" @refreshF="refreshDl1" />
    <!-- 接口1 -->
    <div v-else class="bg-fff pAll mb_10 contentList">
      <div class="header">
        <span>网卡名称：{{ list.name }}</span>
      </div>
      <el-row class="toggleList">
        <el-col :span="12">
          <div class="toggleItem">
            <h2>接收的数据（bits received）</h2>
            <el-row class="item_param">
              <el-col :span="12">
                <div>
                  <p>最新值：{{ formatBytes(list.details.received.last) }}</p>
                  <p>平均值：{{ formatBytes(list.details.received.avg) }}</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <p>最小值：{{ formatBytes(list.details.received.min) }}</p>
                  <p>最大值：{{ formatBytes(list.details.received.max) }}</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="toggleItem">
            <h2>发送的数据（bits sent）</h2>
            <el-row class="item_param">
              <el-col :span="12">
                <div>
                  <p>最新值：{{ formatBytes(list.details.sent.last) }}</p>
                  <p>平均值：{{ formatBytes(list.details.sent.avg) }}</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <p>最小值：{{ formatBytes(list.details.sent.min) }}</p>
                  <p>最大值：{{ formatBytes(list.details.sent.max) }}</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <div>
        <!-- <echarts-load v-if="networkFlowFlag1 || reload_networkFlow1" :chartFlag="networkFlowFlag1" :reload="reload_networkFlow1" @refreshF="refreshDl1" /> -->
        <!-- <cpu-line v-else :chartsData="echartData_networkFlow1" /> -->
        <cpu-line :chartsData="list.echartData_networkFlow1" />
      </div>
    </div>
  </div>
</template>
<script>
import { timeLoad } from '@/assets/js/setTime'
import cpuLine from '@/components/Echarts/cloudEcharts/cpuLine'
import echartsLoad from '@/components/Echarts/echartsLoad'
export default {
  data() {
    return {
      networkFlowFlag1: false,
      reload_networkFlow1: false,
      networkFlowTime1: null,
      // echartData_networkFlow1: {
      //   name: '接收的数据（bits received）',
      //   id: 'networkFlow_line1',
      //   type: 'green',
      //   yData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      //   seriesDate: [820, 932, 901, 934, 1290, 1330, 1320],
      // },
      searchCondition: {},
      list: {
        details: {
          received: { min: '', avg: '', last: '', max: '' },
          sent: { min: '', avg: '', last: '', max: '' },
        },
        echartData_networkFlow1: {},
      },
      initInterval: null,
    }
  },
  components: { cpuLine, echartsLoad },
  props: ['childData'],
  watch: {
    networkFlowFlag1(newVal, oldVal) {
      this.networkFlowTime1 = setTimeout(() => {
        if (this.networkFlowFlag1) {
          this.networkFlowFlag1 = false
          this.reload_networkFlow1 = true
        }
      }, timeLoad)
    },
    childData: {
      deep: true,
      handler(newVal, oldVal) {
        this.searchCondition = newVal
        this.initList_findTraffic()
        if (newVal.type === 'change') {
          clearInterval(this.initInterval)
        }
      },
    },
  },
  created() {
    this.searchCondition = this.childData
    this.initList_findTraffic()
    if (this.searchCondition.type !== 'change') {
      this.initInterval = setInterval(() => {
        this.getSearchTime()
        this.initList_findTraffic()
      }, 1000 * 30)
    }
  },
  methods: {
    // 获取时间
    getSearchTime() {
      var difference = new Date(this.searchCondition.endDate).getTime() - new Date(this.searchCondition.startDate).getTime()
      var startDate = this.initTime(new Date(new Date().getTime() - difference))
      var endDate = this.initTime(new Date())
      // console.log(startDate, '----', endDate)
      this.childValue = {
        startDate: startDate, // 开始日期、(yyyy-MM-dd HH:mm:ss)
        endDate: endDate, // 结束日期、(yyyy-MM-dd HH:mm:ss)
        type: '',
      }
      this.$emit('childByValue', this.childValue)
    },
    initTime(date) {
      const Y = date.getFullYear()
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
      var m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
      var s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s // yyyy-MM-dd HH:mm:ss
    },
    async initList_findTraffic() {
      clearTimeout(this.networkFlowTime1)
      this.networkFlowFlag1 = true
      this.reload_networkFlow1 = false
      const params = new URLSearchParams()
      params.append('relSerialNo', this.$route.query.relSerialNo) // 主机流水号
      params.append('startDate', this.searchCondition.startDate) // 开始日期、(yyyy-MM-dd HH:mm:ss)
      params.append('endDate', this.searchCondition.endDate) // 结束日期、(yyyy-MM-dd HH:mm:ss)
      const { data: res } = await this.$http.post('snmp/networkLog/findTraffic', params)
      this.networkFlowFlag1 = false
      // this.reload_networkFlow1 = true
      this.reload_networkFlow1 = false
      console.log(res)
      switch (res.code) {
        case '0000':
          // this.list1 = res.data.details
          var xData = []
          var timeList = {
            received: [], // 接收的数据（bits received）
            sent: [], // 发送的数据（bits sent）
          }
          var list = {
            received: '接收的数据（bits received）', // 接收的数据（bits received）
            sent: '发送的数据（bits sent）', // 发送的数据（bits sent）
          }
          res.data.list.forEach((item, index) => {
            var time = new Date(item.createDate)
            xData.push(this.getTime(time))
            timeList.received.push(this.formatKBytes_no(item.received)) // I/O等待时间
            timeList.sent.push(this.formatKBytes_no(item.sent)) // 软中断处理时间
          })
          var seriesDate = []
          for (const k in list) {
            seriesDate.push({
              name: list[k],
              type: 'line',
              // stack: '总量',
              data: timeList[k],
            })
          }
          this.list = {
            name: res.data.list[0].name,
            details: res.data.details,
            echartData_networkFlow1: {
              id: 'networkFlow_line1',
              type: 'green',
              xData: xData,
              legendData: ['接收的数据（bits received）', '发送的数据（bits sent）'],
              seriesDate: seriesDate,
              unit: ' Mbps',
            },
          }
          break
        default:
          // this.echartData1 = {
          //   id: 'networkFlow_line1',
          //   type: 'green',
          //   xData: [],
          //   legendData: [],
          //   seriesDate: [],
          //   unit: 'b',
          // }
          this.list = {
            name: '',
            details: {
              received: { min: '', avg: '', last: '', max: '' },
              sent: { min: '', avg: '', last: '', max: '' },
            },
            echartData_networkFlow1: {
              id: 'networkFlow_line1',
              type: 'green',
              xData: [],
              legendData: [],
              seriesDate: [],
              unit: ' Mbps',
            },
          }
          this.networkFlowFlag1 = false
          this.reload_networkFlow1 = true
          break
      }
    },
    refreshDl1() {
      this.reload_networkFlow1 = false
      this.initList_findTraffic()
    },
    // 格式化时间
    getTime(date) {
      const Y = date.getFullYear()
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
      var m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
      var s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s // yyyy-MM-dd HH:mm:ss
    },
    formatBytes(bytes) {
      // console.log('-----bytes', bytes, '----------', bytes / 1024)
      var bytes1 = bytes / 8 // 比特换位字节
      if (bytes1 < 1024) return bytes1 + ' Bbps'
      else if (bytes1 < 1048576) return (bytes1 / 1024).toFixed(2) + ' Kbps'
      else if (bytes1 < 1073741824) return (bytes1 / 1048576).toFixed(2) + ' Mbps'
      else return (bytes1 / 1073741824).toFixed(2) + ' Gbps'
    },
    formatKBytes_no(kbytes) {
      return (kbytes / 1024 / 1024 / 8).toFixed(2) // 除以8是为了比特换为字节
    },
  },
  destroyed() {
    clearInterval(this.initInterval)
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/cloudDetails.scss';
</style>
